<!--[if IE 7]>
<!DOCTYPE>
<html lang="en">
	<head>
<![endif]-->
<!--[if IE 8]>
<!DOCTYPE>
<html lang="en">
    <head>
           <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<![endif]-->
<![if gte IE 9]>
<!DOCTYPE HTML>
<html lang="en">
	<head>
<![endif]>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing series order</title>
<style type="text/css">
	@import "../../../../dojo/resources/dojo.css";
	@import "../../../../dojo/resources/dnd.css";
	@import "../../../../dojo/tests/dnd/dndDefault.css";
	@import "../../../../dijit/tests/css/dijitTests.css";
</style>
<script src="../../../../dojo/dojo.js" data-dojo-config="isDebug: true, has:{'dojo-bidi': true}"></script>
<script>

dojo.require("dojox.charting.Chart");
dojo.require("dojox.charting.axis2d.Default");
dojo.require("dojox.charting.plot2d.Bubble");
dojo.require("dojox.charting.themes.ThreeD");
dojo.require("dojox.charting.widget.Legend");
dojo.require("dojo.dnd.Source");

makeObjects = function(){
    dojo.query("button").style("disabled", true);
    
	var chart1 = new dojox.charting.Chart("chart1").
            setTheme(dojox.charting.themes.ThreeD).
            addAxis("x", {min: 0, max: 10}).
            addAxis("y", {vertical: true, min: 0, max: 10}).
            addPlot("Plot 1", {type: "Bubble"}).
            addSeries("Series A", [{x: 3, y: 3, size: 4}], {plot: "Plot 1", color: "red"}).
            addSeries("Series B", [{x: 5, y: 5, size: 4}], {plot: "Plot 1", color: "green"}).
            addSeries("Series C", [{x: 7, y: 7, size: 4}], {plot: "Plot 1", color: "blue"}).
            setDir("rtl").
            render();

    var series = new dojo.dnd.Source("dnd1"), noUpdate = false;
    series.insertNodes(false, chart1.getSeriesOrder("Plot 1"));
    dojo.connect(series, "onDropInternal", function(){
        var newOrder = this.getAllNodes().map(function(node){
                return node.innerHTML;
            })
        chart1.setSeriesOrder(newOrder);
        noUpdate = true;
        chart1.render();
        noUpdate = false;
    });
    dojo.connect(chart1, "render", function(){
        if(!noUpdate){
            series.getAllNodes().orphan();
            series.sync();
            series.insertNodes(false, chart1.getSeriesOrder("Plot 1"));
        }
    });

    dojo.forEach(["s1", "s2", "s3"], function(id, i){
        dojo.query("button", id).forEach(function(btn){
            if(btn.innerHTML == "Front"){
                dojo.connect(btn, "onclick", function(){
                    chart1.moveSeriesToFront("Series " + "ABCDEFG".charAt(i));
                    chart1.render();
                });
            }else{
                dojo.connect(btn, "onclick", function(){
                    chart1.moveSeriesToBack("Series " + "ABCDEFG".charAt(i));
                    chart1.render();
                });
            }
        });
    });
};

dojo.ready(makeObjects);

</script>
</head>
<body>
<h1>Testing series order</h1>
<!--<p><button onclick="makeObjects();">Go</button></p>-->
<p>Chart:</p>
<div id="chart1" style="width: 200px; height: 200px;"></div>
<div id="legend1"></div>
<p id="s1">Series A: <button>Front</button> <button>Back</button></p>
<p id="s2">Series B: <button>Front</button> <button>Back</button></p>
<p id="s3">Series C: <button>Front</button> <button>Back</button></p>
<p>Series (rearrange using drag-and-drop):</p>
<div id="dnd1" class="container"></div>
<p>That's all Folks!</p>
</body>
</html>
